<template>
    <div class="orignationLife" >
        <Header :bigDataTitle="bigDataTitle" @openMenu="openMenu"  @navback="navback"/>
        <!--@click.stop="closeData"-->
        <div class="partyMenberCount" v-show="!noData" >
            <p class="selectCountp">{{companyName}}
                <!--<span class="iconshuju_icon_xiala iconfont"></span>-->
                <!--<mu-select  v-model="normal.value" @change="changeValue" ref="muSelect" >-->
                    <!--<mu-option v-for="(item,index) in orgArray" :key="index" :label="item.name" :value="item.id"></mu-option>-->
                <!--</mu-select>-->
            </p>
            <div class="partyMenber-total" @click.stop="closeData">
                <p>
                    <span class="num">{{org_count.count_org}}<cite>个</cite></span>
                    <span class="text">党小组总数</span>
                </p>
                <p>
                    <span class="num">{{org_count.count_partymemeber}} <cite>人</cite></span>
                    <span class="text">党员总数</span>
                </p>
            </div>
            <div class="menberArea" id="menberArea" @click.stop="closeData">
                <h3 class="home-h3">党员性别比例</h3>
                <div class="sex">
                    <div class="menSex flex">
                        <p class="sex-left ">
                            <span class="sex-title">男性</span>
                            <span class="sex-percentage">{{(parseInt(sex.man&&sex.man[1]*100))}}%</span>
                        </p>
                        <p class="sex-img">
                            <img src="../img/shuju_dangyuan_man.png" alt="">
                        </p>
                    </div>
                    <div class="womenSex flex">
                        <p class="sex-img">
                            <img src="../img/shuju_dangyuan_woman.png" alt="">
                        </p>
                        <p class="sex-left flex-1">
                            <span class="sex-title">女性</span>
                            <span class="sex-percentage">{{parseInt(sex.won&&sex.won[1]*100)}}%</span>
                        </p>
                    </div>
                </div>
                    <div class="percentage">
                        <div class="percentageWrap">
                            <span class="left">{{sex.man&&sex.man[0]}}人</span>
                            <span class="right">{{sex.won&&sex.won[0]}}人</span>
                        </div>
                        <div class="men"  v-if="sex.man&&sex.man[1]>0" :style="{width:`${(sex.man&&sex.man[1]*100)}`+'%'}"></div>
                        <div class="women" v-if="sex.won&&sex.won[1]>0" :style="{width:`${(sex.won&&sex.won[1]*100)}`+'%'}"></div>
                    </div>
            </div>
            <div class="menberAge" id="menberAge" @click.stop="closeData">
                <h3 class="home-h3">党员年龄比例</h3>
                <div id="pic2"></div>
            </div>
            <div class="menberProportion" id="menberProportion">
                <h3 class="home-h3">党员学历比例</h3>
                <div id="pic3"></div>
            </div>

        </div>
        <div class="noData" v-show="noData">
            <span>暂无数据</span>
        </div>
    </div>
</template>

<script>
    import Header from  '@/views/home/components/header.vue';
    import {mapState,mapMutations} from 'vuex';
    export default{
        data(){
            return{
                bigDataTitle:'党员管理',
                companyName:'',
                position: 'right',
                companyId:'',
                org_count:{},
                sex:{},
                age:{},
                ageArr:[],
                edu:{},
                noData:false,
                normal:{
                    value:''
                },
                orgArray:[{
                    id: 149,
                    name: "七一云党建",
                }]
            }
        },
        computed:{
            ...mapState({
                open:state=>state.initHomeData.open,
                //state=>state.initHomeData.orgArray
                // orgArray:state=>state.initHomeData.orgArray
            })
        },
        methods:{
            ...mapMutations(['openHomeMenu']),
            closeData(){
              this.$refs.muSelect.blur();
            },
            changeValue(e){
                this.orgArray.forEach((item,index)=>{
                    if(item.id==e){
                        this.companyName =item.name;
                        this.companyId=e;
                    }
                });
                this.getData(e)
            },
            navback(){
                this.$router.go(-1);
            },
            fixed(data){
                return data.toFixed(2)
            },
            openMenu(){
                console.log(123)
                this.openHomeMenu({
                    open:!this.open
                })
            },
            pic2(){
                let pic2 =document.getElementById('pic2');
                let myChart = this.$echarts.init(pic2);
                var ageArr =this.ageArr;
                var ageData=[];
                ageArr.forEach((item,index)=>{
                    ageData.push(item.name)
                })
                let  option = {
//                    tooltip : {
//                        trigger: 'item',
//                        formatter: "{a} <br/>{b} : {c} ({d}%)"
//                    },
                    legend: {
                        orient: 'vertical',
                        show: true,
                        left: 16,
                        top: 20,
                        bottom: 10,
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                        },
                        formatter: function (name) {
                            return (name.length > 8 ? (name.slice(0,8)+"...") : name );
                        },
                        data:ageData
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: " {c}人<br/>  ({d}%)",
//                        position: ['50%', '50%']
                    },
                    calculable : true,
                    color:['#08BAE9','#0D65FC','#FF7A52','#FFC63D','#00F0E7'],//自己设置扇形图颜
                    series : [
                        {
                            name:'年龄分布',
                            type:'pie',
                            radius :[0,'55%'],
                            center : ['75%', '50%'],
                            roseType : false,
                            label: {
                                normal: {
                                    position: 'inner',
                                    show : false }
                            },
                            data:ageArr
                        }
                    ]
                };
                myChart.setOption(option)
            },
            pic3(){
                let pic3 =document.getElementById('pic3');
                let myChart3 = this.$echarts.init(pic3);
                var dataAxis =['高中及以下', '本科', '本科及以上'];
                var data = [ this.edu.fir[0],this.edu.sec[0],this.edu.thi[0]];
                var yMax = 200;
                var dataShadow = [];
                for (var i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                }
              let  option = {
                  grid: {
                      top:20,
                      bottom:30,
                      borderWidth: 0 //去除白色边框
                  },
                  xAxis: [{
                      type: 'category',
                      data: ['高中及以下', '本科', '本科及以上'],
                      inverse: false,
                      axisLabel: {
                          interval: 0, //横轴信息全部显示
                          //rotate: -40,//X轴旋转角度
                          textStyle: {
                              fontSize: 12, //X轴字体大小
                              color: '#FFFFFF' //X轴字体颜色
                          },
                      },
                      axisLine: {
                          show: false
                      },
                      axisTick: {
                          show: false //隐藏X轴刻度长度
                      },
                      splitLine: {
                          show: false
                      }, //去除网格线
                      splitArea: {
                          show: false
                      } //去除网格背景颜色
                  }],
                  yAxis: {
                    show:false
                  },
                  dataZoom: [
                      {
                          type: 'inside'
                      }
                  ],
                  series: [
                      { // For shadow
                          type: 'bar',
                          itemStyle: {
                              normal: {color: 'rgba(0,0,0,0.1)'}
                          },
                          barGap:'-100%',
                          barCategoryGap:'40%',
                          data: dataShadow,
                          animation: false,
                      },
                      {
                          type: 'bar',
                          itemStyle: {
                              normal: {
                                  color:function (params){
                                  var colorList = ['#0D65FC','#08BAE9','#00DCD4']
                                        return colorList[params.dataIndex];
                                 },
                                  label: {
                                      show: true, //开启显示
                                      position: 'inside', //在上方显示
                                      bottom:'30',
                                      textStyle: { //数值样式
                                          color: 'white',
                                          fontSize: 12
                                      },
                                      formatter: function (name) {
                                          console.log(name)
                                          return name.value+'人'
                                      },
                                  }
                              },
                              emphasis: {
                                  color: new this.$echarts.graphic.LinearGradient(
                                      0, 0, 0, 1,
                                      [
                                          {offset: 0, color: '#2378f7'},
                                          {offset: 0.7, color: '#2378f7'},
                                          {offset: 1, color: '#83bff6'}
                                      ]
                                  )
                              }
                          },
                          data: data
                      }
                  ]
              };
                myChart3.setOption(option)
            },
            getData(id){
                this.$http.get('/app/DataVisualization/index',{
                    organization_id:id
                }).then((res)=>{
                    console.log(res.data)
                    if(Object.keys(res.data).length){
                        this.org_count =res.data.org_count;
                        this.sex=res.data.sex;
                        this.ageArr =res.data.age;
                        this.edu=res.data.edu;
                        this.pic2();
                        this.pic3();
                        this.noData =false
                    }else{
                        this.noData =true
                    }
                })
            }
        },
        components:{
            Header
        },
        mounted(){
            if(!Cookies.get('user_71ydj')){
                this.$router.push({
                    path:'/mine'
                })
                return false
            }
            this.$progress.done();
            this.companyName =JSON.parse(Cookies.get('user_71ydj')).organization;
            this.companyId =JSON.parse(Cookies.get('user_71ydj')).organization_id;
            this.getData(this.companyId);
            console.log(this.orgArray)

        }
    }
</script>
<style lang="scss" scoped="">
    .orignationLife /deep/{
        color: white;
        .partyMenberCount{
            margin-top: 45px;
            .selectCountp{
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 16px;
                color: white;
                position: relative;
                background: rgba(0,0,0,0.1);
                margin: 0 -19px;
                position: relative;
                .mu-input{
                    position: absolute;
                    left: 0;
                    top:0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                }
                .iconfont{
                    color: white;
                    opacity: 0.3;
                }
                &:after{
                    position: absolute;
                }
            }
            .selectCount{
                height: 50px;
                line-height: 50px;
                margin: 0 -19px;
                background: #000;
                text-align: center;
                select{
                    width: 100%;
                    -webkit-appearance: none;
                    border: 0;
                    outline: 0;
                    height: 100%;
                    background: #000;
                    font-size: 16px;
                    color: white;
                    position: relative;
                    text-align-last:center;
                    &:after{
                        content: "";
                        display: inline-block;
                        border-width: 3px 3px 0 3px;
                        border-color:#fff  transparent transparent transparent ;
                        border-style: solid;
                        position: relative;
                        top: -1px;
                        position: absolute;
                        top: 50%;
                        right: 15px;
                        margin-top: -2px;
                        z-index: 3;
                    }
                    option{
                        width: 100%;
                        height:50px;
                        text-align: center;
                        font-size: 16px;
                        color: white;
                        text-align-last:center;
                        span{
                            display: inline-block;
                            width: 100%;
                            height: 100%;
                            text-align: center;
                            background: red;
                        }
                    }
                }
            }
            .partyMenber-total{
                width: 100%;
                height: 136px;
                overflow: hidden;
                /*background: linear-gradient(#1694C8,#183377);*/
                background: #183377;
                p{
                    display: inline-block;
                    width: 50%;
                    position: relative;
                    padding-top: 38px;
                    &:nth-child(1):after{
                        position: absolute;
                        content: '';
                        right: -1px;
                        width: 1px;
                        height: 30px;
                        background: rgba(255,255,255,0.1);
                        top:43px;
                    }
                    span{
                        text-align: center;
                    }
                    .text{
                        font-size: 14px;
                        color: white;
                        display: block;
                        line-height: 13px;
                        padding-top: 10px;
                    }
                    .num{
                        font-size: 34px;
                        color: #08BAE9;
                        display: block;
                        height: 26px;
                        line-height: 26px;
                        cite{
                            font-size:21px;
                            color: #08BAE9;
                            font-style: normal;
                        }
                    }
                }
            }
            .menberArea{
                height: 192px;
                background:rgba(22, 148, 200, 0.08);
                border: 2px solid rgba(2552,255,255,0.08);
                border-radius: 6px;

                .sex{
                    height: 60px;
                    .menSex,.womenSex{
                        width: 50%;
                        height: 60px;
                        overflow: hidden;
                        float: left;
                        .sex-left{
                            padding-left: 50px;
                            vertical-align: top;
                            width: 100px;
                            text-align: center;
                            .sex-title{
                                font-size: 14px;
                                color: white;
                                line-height: 13px;
                                padding-top: 13px;
                                display: block;
                            }
                            .sex-percentage{
                                color: #0D65FC;
                                font-size: 20px;
                                line-height: 22px;
                                padding-top: 6px;
                                display: block;
                            }
                        }
                    }
                    .menSex{
                        position: relative;
                        .sex-img{
                            text-align: right;
                            width: 31px;
                            height: 60px;
                            display: inline-block;
                            vertical-align: top;
                            padding-right: 43px;
                            float: right;
                            position: absolute;
                            right: 0;
                            top:0;
                            margin-right: 15px;
                            img{
                                display: inline-block;
                            }
                        }
                    }
                    .womenSex{
                        position: relative;
                        .sex-img{
                            position: absolute;
                            left: 0;
                            top:0;
                            margin-left:-10px;
                            text-align: left;
                            width: 31px;
                            height: 60px;
                            display: inline-block;
                            vertical-align: top;
                            float: left;
                            padding-right: 43px;
                        }
                    }
                }
                .percentage {
                    display: flex;
                    height: 16px;
                    margin:0 16px;
                    font-size: 8px;
                    margin-top: 20px;
                    box-sizing: border-box;
                    border-radius:8px;
                    position: relative;
                    overflow: hidden;
                    .percentageWrap{
                        width: 100%;
                        height: 100%;
                        background: transparent;
                        border-radius:8px;
                        z-index: 99999;
                        position: absolute;
                        left: 0;
                        top:0;
                        z-index: 999;
                        .left{
                            float: left;
                            margin-left:10px;
                        }
                        .right{
                            float: right;
                            margin-right:10px;
                        }
                        /*background: rgba(13, 101, 252, 1);*/
                    }
                    .men {
                        height: 16px;
                        width: 50%;
                        background: rgba(13, 101, 252, 1);
                        color: #fff;
                        display: flex;
                        align-items: center;
                        /*border-radius:8px  0px   0px  8px;*/
                        span{
                            float: left;
                            padding-left: 17px;
                        }
                    }
                    .women {
                        height: 16px;
                        width: 50%;
                        background: rgba(8, 186, 233, 1);
                        color: #fff;
                        display: flex;
                        /*border-radius:0px  8px   8px  0px;*/
                        align-items: center;
                        justify-content: flex-end;
                        span{
                            float: right;
                            padding-right: 17px;
                        }
                    }
                }
            }
            .menberAge{
                height: 266px;
                background:rgba(22, 148, 200, 0.08);
                border: 2px solid rgba(2552,255,255,0.08);
                border-radius: 6px;
                margin-top: 15px;
                #pic2{
                  height:170px
                }
            }
            .menberProportion{
                height: 228px;
                background:rgba(22, 148, 200, 0.08);
                border: 2px solid rgba(2552,255,255,0.08);
                border-radius: 6px;
                margin-top: 15px;
                #pic3{
                    height: 130px;
                }
            }

        }
        .home-h3{
            font-size: 14px;
            font-weight: normal;
            color: rgba(8, 186, 233, 1);
            padding-top: 20px;
            padding-bottom: 32px;
            padding-left: 17px;
            height: 13px;
            line-height: 13px;
            margin: 0;
        }
    }
</style>